  <template>
<div  v-show="isShow">
    <div class="alert">
        <div>{{msg}}</div>
        <div v-if="type==='alert'">
             <div class="btnCommon success" @click="close">确定</div>
        </div>
       <div v-else class="space-round">
             <div class="btnCommon cancel" @click="cancelEvent">取消</div>
             <div class="btnCommon success" @click="successEvent">确定</div>
        </div>
    </div>
    <div class="mask" @click="closeMask"></div>
</div>
</template>
<script>
export default {
name:'',
props:{
    type:{
        type:String,
        default:'alert'
    },
    msg:{
        type:String,
        default:''
    },
    isShow:{
        type:Boolean,
        default:false
    },
    success:{
        type:Function,
        default:()=>{console.log('点击success方法');}
    },
    cancle:{
        type:Function,
        default:()=>{console.log('点击cancel方法');}
    }
},
 methods: {
     close(){
         if (this.type==='alert') {
             
         }
         this.isShow=false
     },
     closeMask(){
         this.close()
     },
     cancelEvent(){
        this.cancelEvent()
        this.close()
     },
     successEvent(){
        this.success()
        this.close()
     }
 },
mounted(){},
components: {},
}
</script>
<style lang='scss' scoped>
$btn-main: #009688;
$btn-dark:darken($btn-main,5%);
.alert{
    width: 300px;
    height: 150px;
    position: fixed;
    background: white;
    border-radius: 6px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -75px;
    padding: 20px 10px ;
    box-shadow: 0 5px 8px rgba(0,0,0,0.05);
    z-index: 3000;
}
.space-round{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 0 10px;
}
.btnCommon{
    width: 105px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 6px;
    &.success{
        background: #009688;
        color: #fff;
        &:hover{
            background: $btn-dark;
        }
    }
      &.cancel{
        background: #ededed;
        color: #333;
    }
}
.mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    overflow: hidden;
    z-index: 2000;
}
</style>